<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport">
    <meta content="telephone=no,email=no,address=no" name="format-detection">
    <meta content="on" http-equiv="x-dns-prefetch-control">
    <meta name="renderer" content="webkit" />
    <meta name="keyword" content="" />
    <meta name="description" content="" />
    <title>feiling</title>
    <link rel="stylesheet" href="../../asset/vendor/video/video-js.min.css">
    <link rel="stylesheet" href="../../asset/css/main.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../../asset/vendor/html5shiv.min.js"></script>
    <script src="../../asset/vendor/respond.min.js"></script>
    <script>
        alert("您的浏览器版本过低请升级！");
        location.href = "http://outdatedbrowser.com/zh-cn";
    </script>
    <![endif]-->
</head>
<body>
<!---header--->
<header id="header" class="header">
    <ul>
        <li class="special first">
            <a href="index.html">
                <img src="../../asset/images/basic/litter-title.png" alt="">
            </a>
        </li>
        <li>
            <a href="">People</a>
        </li>
        <li>
            <a href="">Products</a>
        </li>
        <li class="active">
            <a href="">Story</a>
        </li>
        <li>
            <a href="">News</a>
        </li>
        <li>
            <a href="">Contact</a>
        </li>
        <li class="special last">
            <a id="searchBtn" href="javascript:;"></a>
        </li>
    </ul>
</header>
<div class="story">
    <div class="story-bg story-bg-1" style="background-image: url(../../asset/images/yixing.jpg)"></div>
    <div class="story-cont">
        <div class="story-video">
            <video
                    width="100%"
                    height="100%"
                    id="story-video"
                    class="video-js"
                    controls
                    preload="auto"
                    poster=""
                    data-setup='{}'>
                <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
                <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
                <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                    <a href="http://videojs.com/html5-video-support/" target="_blank">
                        supports HTML5 video
                    </a>
                </p>
            </video>
            <a class="video-control play" id="video-control" href="javascript:;"></a>
        </div>
        <div class="story-introduction">
            <div class="story-introduction-cont">
                <div class="story-title">
                    <span>introduction</span>
                </div>
                <div class="cont">
                    story introduction story introduction story introduction story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                </div>
            </div>
            <div class="story-bg story-bg-2"><img src="../../asset/images/basic/logo-s.png" alt=""></div>
        </div>
        <div class="story-introduction story-why">
            <div class="story-introduction-cont">
                <div class="story-title">
                    <span>why</span>
                </div>
                <div class="cont">
                    story introduction story introduction story introduction story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                </div>
            </div>
        </div>
        <div class="our-activity">
            <div class="our-activity-img" style="background-image: url(../../asset/images/huamulan.jpg)"></div>
            <div class="our-activity-text">
                <div class="wrapper">
                    <div class="title">our activity</div>
                    <div class="text">
                        some text description some text description
                        some text description some text description
                        some text description some text description
                        some text description some text description
                        some text description some text description
                        some text description some text description
                        some text description some text description
                        some text description some text description
                        some text description some text description
                        some text description some text description
                        some text description some text description
                        some text description some text description
                    </div>
                    <div class="btn">
                        <a href="">check our products</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="story-introduction story-version">
            <div class="story-introduction-cont">
                <div class="story-title">
                    <span>Version</span>
                </div>
                <div class="cont">
                    story introduction story introduction story introduction story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                    story introduction story introduction story introduction
                </div>
            </div>
            <div class="story-bg story-bg-3" style="background-image: url(../../asset/images/zhuangzhou.jpg)"></div>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="footer-cont">
        Footer copyright
    </div>
</footer>
<!---搜索--->
<div id="search" class="search">
    <div class="search-cont">
        <form class="search-from">
            <input type="text">
            <button class="search-btn">搜索</button>
        </form>
        <div class="search-list" id="search-list">
            <div id="scrollList">
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
                <a href="" class="search-list-item">
                    <div class="img">
                        <img src="../../asset/images/product-img-01.png" alt="">
                    </div>
                    <div class="text">
                        <div class="product-name">Product Name</div>
                        <div class="product-des">
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                            Product description
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<!--返回顶部-->
<a href="javascript:;" id="to-top"></a>
<script src="../../asset/vendor/jquery.min.js"></script>
<script src="../../asset/vendor/jquery.slimscroll.min.js"></script>
<script src="../../asset/vendor/video/video.min.js"></script>
<script src="../../asset/js/main.js"></script>
<script>
    $(function(){

        var player = videojs('story-video',{
            controls: false,
            autoplay: false,
            preload: "auto",
            loop: false,
            controlBar: {
                captionsButton: false,
                chaptersButton: false,
                playbackRateMenuButton: true,
                LiveDisplay: true,
                subtitlesButton: false,
                remainingTimeDisplay: true,

                progressControl: true,

                volumeMenuButton: {
                    inline: false,
                    vertical: true
                },
                fullscreenToggle: true
            }
        });

        var play = false;
        $("#video-control").on("click",function(){
            if( !play ){
                player.play();
                $(this).removeClass("play").addClass("pause");
            }else{
                player.pause();
                $(this).removeClass("pause").addClass("play");
            }
            play = !play;
        })

    })

</script>
</body>
</html>